<template>
  <div class="box">
    <!-- 页面顶部区域 -->
    <div class="boxtop">
      <van-nav-bar title="检测报告">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="clickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <!-- tab页面 -->
    <van-tabs v-model="activeName" title-active-color="#333333" color="#333333">
      <van-tab title="2021.04.12" name="a">
        <!-- 这叠面板 -->
        <van-collapse v-model="activeNames">
          <!-- 车辆信息 -->
          <van-collapse-item title="车辆信息" name="1">
            <!-- 中间的表单内容 -->
            <van-cell-group>
              <van-field
                v-model="FormInfo.value"
                label="车型"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="VIN"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="上牌日期"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="表显里程"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="颜色"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="过户"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="使用性质"
                placeholder="请输入用户名"
              />
            </van-cell-group>
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 安全部件 -->
          <van-collapse-item name="2">
            <template #title>
              <div>安全部件 <van-icon name="question-o" color="#df0012" /></div>
            </template>
            <!-- 车框的图片 -->
            <div class="carPicture">
              <div class="picture">车的图片</div>
            </div>
            <!-- <van-cell-group>
                <van-cell title="车顶" value="正常" />
                <van-cell title="发动机舱防火墙" value="正常"/>
                <van-cell title="左A柱" value="正常"/>
                <van-cell title="右前纵梁" value="正常"/>
                <van-cell title="外观部件" value="正常"/>
                <van-cell title="性能部件" value="正常"/>
                <van-cell title="仪器检测" value="正常"/>
              </van-cell-group> -->
            <div class="carModel">
              <span class="carModelFrist">车顶</span>
              <div :class="this.color === '1' ? 'carModelsecond' : 'aaa'">
                {{ this.color === "1" ? "正常" : "异常" }}
              </div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">发动机舱防火墙</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">左A柱</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">右前纵梁</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">性能部件</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 车况描述 -->
          <van-collapse-item title="车况表述" name="3">
            <!-- 车况的输入框 -->
            <div class="inputAll">
              <!-- 安全部件 -->
              <div class="saftbujian">安全部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
              <!-- 性能部件 -->
              <div class="saftbujian">性能部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
              <!-- 外观部件 -->
              <div class="saftbujian">外观部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
            </div>
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 车况描述 -->
          <van-collapse-item title="车况描述" name="4">
            <div>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">车前45度</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">轮廓</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">驾驶位左侧</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">后备箱整体</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">右后45度</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">后排座右座</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">副驾驶右侧</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">发动机整体</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">中控与方向盘</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">表显里程</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">行驶证</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <!-- <van-grid-item>
                    <div class="cardu">中控与方向盘</div>
                    <div class="pictureaa">
                      <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                    </div>
                  </van-grid-item> -->
              </van-grid>
            </div>
          </van-collapse-item>
        </van-collapse>
        <!-- 返回的按钮 -->
        <div class="bottomButton">
          <div class="button" @click="buttonClick">
            <span class="back">返回</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="2021.05.22" name="b">
        <!-- 折叠面板 -->
        <van-collapse v-model="activeNames">
          <!-- 车辆信息 -->
          <van-collapse-item title="车辆信息" name="1">
            <!-- 中间的表单内容 -->
            <van-cell-group>
              <van-field
                v-model="FormInfo.value"
                label="车型"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="VIN"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="上牌日期"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="表显里程"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="颜色"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="过户"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="使用性质"
                placeholder="请输入用户名"
              />
            </van-cell-group>
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 安全部件 -->
          <van-collapse-item name="2">
            <template #title>
              <div>安全部件 <van-icon name="question-o" color="#df0012" /></div>
            </template>
            <!-- 车框的图片 -->
            <div class="carPicture">
              <div class="picture">车的图片</div>
            </div>
            <!-- <van-cell-group>
                <van-cell title="车顶" value="正常" />
                <van-cell title="发动机舱防火墙" value="正常"/>
                <van-cell title="左A柱" value="正常"/>
                <van-cell title="右前纵梁" value="正常"/>
                <van-cell title="外观部件" value="正常"/>
                <van-cell title="性能部件" value="正常"/>
                <van-cell title="仪器检测" value="正常"/>
              </van-cell-group> -->
            <div class="carModel">
              <span class="carModelFrist">车顶</span>
              <div :class="this.color === '1' ? 'carModelsecond' : 'aaa'">
                {{ this.color === "1" ? "正常" : "异常" }}
              </div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">发动机舱防火墙</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">左A柱</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">右前纵梁</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">性能部件</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 车况描述 -->
          <van-collapse-item title="车况表述" name="3">
            <!-- 车况的输入框 -->
            <div class="inputAll">
              <!-- 安全部件 -->
              <div class="saftbujian">安全部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
              <!-- 性能部件 -->
              <div class="saftbujian">性能部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
              <!-- 外观部件 -->
              <div class="saftbujian">外观部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
            </div>
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 车况描述 -->
          <van-collapse-item title="车况描述" name="4">
            <div>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">车前45度</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">轮廓</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">驾驶位左侧</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">后备箱整体</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">右后45度</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">后排座右座</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">副驾驶右侧</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">发动机整体</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">中控与方向盘</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">表显里程</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">行驶证</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <!-- <van-grid-item>
                    <div class="cardu">中控与方向盘</div>
                    <div class="pictureaa">
                      <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                    </div>
                  </van-grid-item> -->
              </van-grid>
            </div>
          </van-collapse-item>
        </van-collapse>
        <!-- 返回的按钮 -->
        <div class="bottomButton">
          <div class="button" @click="buttonClick">
            <span class="back">返回</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="2023.09.30" name="c">
        <!-- 这叠面板 -->
        <van-collapse v-model="activeNames">
          <!-- 车辆信息 -->
          <van-collapse-item title="车辆信息" name="1">
            <!-- 中间的表单内容 -->
            <van-cell-group>
              <van-field
                v-model="FormInfo.value"
                label="车型"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="VIN"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="上牌日期"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="表显里程"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="颜色"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="过户"
                placeholder="请输入用户名"
              />
              <van-field
                v-model="FormInfo.value"
                label="使用性质"
                placeholder="请输入用户名"
              />
            </van-cell-group>
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 安全部件 -->
          <van-collapse-item name="2">
            <template #title>
              <div>安全部件 <van-icon name="question-o" color="#df0012" /></div>
            </template>
            <!-- 车框的图片 -->
            <div class="carPicture">
              <div class="picture">车的图片</div>
            </div>
            <div class="carModel">
              <span class="carModelFrist">车顶</span>
              <div :class="this.color === '1' ? 'carModelsecond' : 'aaa'">
                {{ this.color === "1" ? "正常" : "异常" }}
              </div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">发动机舱防火墙</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">左A柱</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">右前纵梁</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
            <div class="carModel">
              <span class="carModelFrist">性能部件</span>
              <div class="carModelsecond">正常</div>
            </div>
            <van-divider />
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 车况描述 -->
          <van-collapse-item title="车况表述" name="3">
            <!-- 车况的输入框 -->
            <div class="inputAll">
              <!-- 安全部件 -->
              <div class="saftbujian">安全部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
              <!-- 性能部件 -->
              <div class="saftbujian">性能部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
              <!-- 外观部件 -->
              <div class="saftbujian">外观部件</div>
              <!-- 输入框 -->
              <div class="inputText">
                <van-field
                  v-model="inputinformation"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入文字"
                />
              </div>
            </div>
          </van-collapse-item>
          <div class="KongGe"></div>
          <!-- 车况描述 -->
          <van-collapse-item title="车况描述" name="4">
            <div>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">车前45度</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">轮廓</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">驾驶位左侧</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">后备箱整体</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">右后45度</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">后排座右座</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">副驾驶右侧</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">发动机整体</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">中控与方向盘</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" :column-num="3">
                <van-grid-item>
                  <div class="cardu">表显里程</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <van-grid-item>
                  <div class="cardu">行驶证</div>
                  <div class="pictureaa">
                    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                  </div>
                </van-grid-item>
                <!-- <van-grid-item>
                    <div class="cardu">中控与方向盘</div>
                    <div class="pictureaa">
                      <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                    </div>
                  </van-grid-item> -->
              </van-grid>
            </div>
          </van-collapse-item>
        </van-collapse>
        <!-- 返回的按钮 -->
        <div class="bottomButton">
          <div class="button" @click="buttonClick">
            <span class="back">返回</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'a',
      activeNames: ['1'],
      FormInfo: {
        value: ''
      },
      color: '0',
      // 输入框的信息
      inputinformation: ''
    }
  },
  methods: {
    // clickLeft () {
    //   this.$router.back()
    // },
    // 点击左侧的箭头
    clickLeft () {
      console.log('1111')
      this.$router.back()
    },
    buttonClick () {
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
body {
  height: 100%;
  background-color: pink;
}
// 返回的按钮
.bottomButton {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px;
  background-color: #f6f6f9;
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 343px;
    height: 38px;
    background-color: #4397d4;
    border-radius: 19px;
    .back {
      display: inline;
      color: #ffff;
    }
  }
}
// 图片上面的文字
.cardu {
  margin-bottom: 10px;
}
// 图片区域
.pictureaa {
  width: 82px;
  height: 82px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #dddddd;
}
.inputAll {
  .saftbujian {
    font-size: 14px;
    color: #000;
  }
  .inputText {
    margin-top: 10px;
    width: 343px;
    height: 70px;
    border: 1px solid #e5e5e5;
  }
}

.carModel {
  position: relative;
  display: flex;
  // justify-content: start;
  // align-items: center;
  margin-top: 10px;
  // background-color: pink;
  .carModelFrist {
    display: inline;
    font-size: 14px;
    color: #323233;
  }
  .carModelsecond {
    position: absolute;
    right: 0;
    top: 0;
  }
  .aaa {
    position: absolute;
    right: 0;
    top: 0;
    color: red;
  }
}
.carPicture {
  .picture {
    width: 355px;
    height: 238px;
    background-color: pink;
  }
}
.KongGe {
  height: 10px;
  background-color: #f6f6f9;
}
</style>
